<template>
  <div class="name border-bottom">
    <input 
      readonly 
      :placeholder="placeholder"
      :value="value" 
      >
    <div class="operate">
      <span class="edit op" @click="handleEdit">
        <span class="icon">
          <i class="iconfont icontg_bianji"></i>
        </span>
        <span class="">
          编辑
        </span>
      </span>
      <span class="delete op" @click="handleDelete">
        <span class="icon">
          <i class="iconfont icontg_shanchu"></i>
        </span>
        <span class="text">
          删除
        </span>
      </span>
    </div>
    <bc-modal v-if="showEditPage">
      <edit-link 
        @hide="hideEditPage" 
        :linkData="linkData"
        @click="editedLinkData"
      ></edit-link>
    </bc-modal>
  </div>
</template>

<script>
import EditLink from './edit-link'
import BcModal from '@/components/base/bc-modal/bc-modal'
import {getByteLen} from '@/assets/js/util'
export default {
  components: {
    EditLink,
    BcModal
  },
  props: {
    placeholder: {
      type: String,
      default: '自定义名称最多10个字'
    },
    value: {
      type: String,
      default: ''
    },
    linkData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      inputValue: "",
      showEditPage: false 
    }
  },
  methods: {
    handleEdit() {
      this.showEditPage = true 
    },
    hideEditPage() {
      this.showEditPage = false 
    },
    updateValue(e) {
      let len = getByteLen(e.target.value)
      console.log(len)
      if (len > 20) {
        this.inputValue = e.target.value.slice(0,10)
        console.log(this.inputValue)
      } else {
        this.inputValue = e.target.value
      }
      this.$emit('click', this.inputValue)
    },
    handleDelete() {
      this.$emit('click')
    },
    setEditable() {
      this.readOnly = true
    },
    editedLinkData(data) {
      this.showEditPage = false 
      this.$emit('update', data)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
    .name
      display flex 
      height 40px 
      align-items center 
      justify-content space-between
      box-sizing border-box 
      width 100%
      input 
        outline none 
        background none
        min-width 100px
      .operate 
        display flex 
        .op
          display flex 
          align-items center
          min-width 51px
          &.edit 
            .icon 
              border 1px solid $color-theme-dark  
          &.delete 
            color $color-theme-red 
            margin-left 10px
            .icon 
              border 1px solid $color-theme-red  
              .iconfont  
                color $color-theme-red 
          .icon 
            width 16px 
            height 16px 
            border-radius 50% 
            display inline-block
            margin-right 5px
     
</style>